import { onFormSubmitValidateEnd } from '@formily/core';
import { Button, Checkbox, Form, Input, Select, Space, Switch } from 'antd';
import React, { useState } from 'react';
import OptionsSelector from '../OptionsSelector';
import StringProp from '../PropsPanel/StringProp';
import { typeOptions } from './data';

export default function FieldItemForm({
  initFormData = { type: 'input' },
  onFinish = (formData: any) => {},
}) {
  const [isDisable, setIsDisable] = useState(false);
  const requiredRule = [
    {
      required: true,
      message: '此项必填',
    },
  ];

  const handleFinish = (formData: any) => {
    console.log('获取到提交的内容: ', formData);
    setIsDisable(true);
    // 保存数据
    onFinish(formData);
  };

  return (
    <Form
      labelCol={{ span: 4 }}
      disabled={isDisable}
      onFinish={handleFinish}
      initialValues={initFormData}
      size="small"
    >
      <Form.Item label="标题" name="title" rules={requiredRule}>
        <Input placeholder="请输入标题" />
      </Form.Item>
      <Form.Item label="默认值" name="initialValue">
        <Input placeholder="请输入默认值" />
      </Form.Item>
      <Form.Item label="索引" rules={requiredRule} name="dataIndex">
        <Input placeholder="请输入索引" />
      </Form.Item>
      <Form.Item label="类型" rules={requiredRule} name="type">
        <Select options={typeOptions} placeholder="请选择类型" />
      </Form.Item>
      <Form.Item label="说明" name="description">
        <Input placeholder="请输入说明文字" />
      </Form.Item>
      <Form.Item label="占位符" name="placeholder">
        <Input placeholder="请输入占位符" />
      </Form.Item>
      <Form.Item label="正则" name="pattern">
        <Input placeholder="请输入正则" />
      </Form.Item>
      <Form.Item label="正则提示" name="pattern">
        <Input placeholder="请输入正则匹配失败的提示" />
      </Form.Item>
      <Form.Item label="后缀" name="addOn">
        <StringProp />
      </Form.Item>
      <Form.Item label="前缀" name="preFix">
        <StringProp />
      </Form.Item>
      <Form.Item label="侯选项" name="options">
        <OptionsSelector />
      </Form.Item>
      <Form.Item label="必填" name="required" valuePropName="checked">
        <Checkbox />
      </Form.Item>
      <Form.Item label="提示信息" name="extra" tooltip="额外的提示信息，当需要错误信息和提示文案同时出现时，可以使用这个。">
        <Input placeholder='请输入提示' />
      </Form.Item>
      <Form.Item label="标题说明" name="tooltip" tooltip="配置提示信息">
        <Input placeholder='请输入配置提示信息' />
      </Form.Item>
      <Form.Item label="状态反馈" name="hasFeedback" valuePropName='checked'>
        <Checkbox />
      </Form.Item>
      <Form.Item wrapperCol={{ offset: 4 }}>
        <Space>
          <Button type="primary" htmlType="submit">
            保存
          </Button>
          <Button htmlType="reset">重置</Button>
          {isDisable && (
            <a href="javascript:" onClick={() => setIsDisable(false)}>
              编辑
            </a>
          )}
        </Space>
      </Form.Item>
    </Form>
  );
}
